@extends('backend.layouts.base')
@section('title', '概况')
@section('content')
    <link rel="stylesheet" href="/static/css/backend/detail.css">
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-head">
                <div class="vue-main-title">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">系统信息</div>
                </div>
                <div class="vue-main-form">
                    <el-row>
                        <el-col :span="6">操作系统</el-col>
                        <el-col :span="12">[[info.base.php_os]]</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">运行环境</el-col>
                        <el-col :span="12">[[info.base.server_software]]</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">PHP运行方式</el-col>
                        <el-col :span="12">[[info.base.php_sapi_name]]</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">上传附件限制</el-col>
                        <el-col :span="12">[[info.base.upload_max_filesize]]</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">服务器时间</el-col>
                        <el-col :span="12">[[info.base.server_time]]</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">北京时间</el-col>
                        <el-col :span="12">[[info.base.beijing_time]]</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">服务器域名</el-col>
                        <el-col :span="12">[[info.base.server_name]]</el-col>
                    </el-row>
                </div>
            </div>
        </div>

    </div>
    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'dashboard',
            data() {
                return{
                    info:{
                        base:{}
                    }
                }
            },
            created() {

            },
            mounted() {
                this.getData();
            },
            methods: {
                getData() {
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! absolute_admin_url('common.index.dashBoardInfo') !!}',{}).then(function (response) {
                            if (response.data.result){
                                this.info = {
                                    ...response.data.data,
                                };
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            loading.close();
                        },function (response) {
                            this.$message({message: response.data.msg,type: 'error'});
                            loading.close();
                        }
                    );
                },
            },
        })

    </script>
    <style>
        .el-row {
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
            padding-bottom: 30px;
        }
    </style>
@endsection
